import { useState, useEffect } from "react";
import { Tabs, Table, Input, Switch } from "antd";

export default function TransactionRate({
  formData,
  onSubmit,
}: {
  formData: any;
  onSubmit: (data: any) => void;
}) {
  
  const initialData = {
    recharge: [
      {
        key: "1",
        type: "法币跨行转人",
        currency: "EUR",
        fee: "",
        switchOn: false,
      },
      {
        key: "2",
        type: "",
        currency: "CNH",
        fee: "",
        switchOn: false,
      },
      {
        key: "3",
        type: "",
        currency: "USD",
        fee: "",
        switchOn: false,
      },
      {
        key: "4",
        type: "法币同行转人",
        currency: "EUR",
        fee: "",
        switchOn: false,
      },
      {
        key: "5",
        type: "",
        currency: "CNH",
        fee: "",
        switchOn: false,
      },
      {
        key: "6",
        type: "",
        currency: "USD",
        fee: "",
        switchOn: false,
      },
      {
        key: "7",
        type: "",
        currency: "USDC",
        fee: "",
        switchOn: false,
      },
      {
        key: "8",
        type: "U币转入",
        currency: "USDT",
        fee: "",
        switchOn: false,
      },
    ],
    exchange: [
      {
        key: "4",
        type: "法币间兑换",
        buycurrency: "USD",
        shellcurrency: "EUR",
        fee: "",
        switchOn: false,
      },
      {
        key: "5",
        type: "",
        buycurrency: "CNH",
        shellcurrency: "EUR",
        fee: "",
        switchOn: false,
      },
      {
        key: "6",
        type: "",
        buycurrency: "EUR",
        shellcurrency: "USD",
        fee: "",
        switchOn: false,
      },
      {
        key: "7",
        type: "",
        buycurrency: "CNH",
        shellcurrency: "USD",
        fee: "",
        switchOn: false,
      },
      {
        key: "8",
        type: "",
        buycurrency: "USD",
        shellcurrency: "CNH",
        fee: "",
        switchOn: false,
      },
      {
        key: "9",
        type: "",
        buycurrency: "EUR",
        shellcurrency: "CNH",
        fee: "",
        switchOn: false,
      },
      {
        key: "10",
        type: "法币与U币兑换",
        buycurrency: "USDT",
        shellcurrency: "USD",
        fee: "",
        switchOn: false,
      },
      {
        key: "11",
        type: "",
        buycurrency: "USDT",
        shellcurrency: "EUR",
        fee: "",
        switchOn: false,
      },
      {
        key: "12",
        type: "",
        buycurrency: "USDC",
        shellcurrency: "USD",
        fee: "",
        switchOn: false,
      },
      {
        key: "13",
        type: "",
        buycurrency: "USDC",
        shellcurrency: "EUR",
        fee: "",
        switchOn: false,
      },
      {
        key: "14",
        type: "U币与法币兑换",
        buycurrency: "USD",
        shellcurrency: "USDT",
        fee: "",
        switchOn: false,
      },
      {
        key: "15",
        type: "",
        buycurrency: "EUR",
        shellcurrency: "USDT",
        fee: "",
        switchOn: false,
      },
      {
        key: "16",
        type: "",
        buycurrency: "USD",
        shellcurrency: "USDC",
        fee: "",
        switchOn: false,
      },
      {
        key: "17",
        type: "",
        buycurrency: "EUR",
        shellcurrency: "USDC",
        fee: "",
        switchOn: false,
      },
    ],
    transfer: [
      {
        key: "4",
        type: "法币转出",
        currency: "EUR",
        fee: "",
        min: "",
        switchOn: false,
      },
      {
        key: "5",
        type: "",
        currency: "USD",
        fee: "",
        min: "",
        switchOn: false,
      },
      {
        key: "10",
        type: "U币转出",
        currency: "USDC",
        fee: "",
        min: "",
        switchOn: false,
      },
      {
        key: "11",
        type: "",
        currency: "USDT",
        fee: "",
        min: "",
        switchOn: false,
      },
    ],
    settlement: [
      {
        key: "4",
        type: "结汇",
        currency: "CNH",
        fee: "",
        switchOn: false,
      },
    ],
  };
  const simulatedFormData = {
    recharge: [
      {
        key: "1",
        type: "法币跨行转人",
        currency: "EUR",
        fee: "0.5",
        switchOn: true,
      },
      {
        key: "2",
        type: "法币跨行转人",
        currency: "CNH",
        fee: "0.3",
        switchOn: false,
      },
      {
        key: "3",
        type: "法币跨行转人",
        currency: "USD",
        fee: "0.4",
        switchOn: true,
      },
      {
        key: "4",
        type: "法币同行转人",
        currency: "EUR",
        fee: "0.6",
        switchOn: false,
      },
      {
        key: "5",
        type: "法币同行转人",
        currency: "CNH",
        fee: "0.2",
        switchOn: true,
      },
      {
        key: "6",
        type: "法币同行转人",
        currency: "USD",
        fee: "0.35",
        switchOn: false,
      },
      {
        key: "7",
        type: "U币转入",
        currency: "USDT",
        fee: "0.1",
        switchOn: true,
      },
      {
        key: "8",
        type: "U币转入",
        currency: "USDC",
        fee: "0.2",
        switchOn: false,
      },
    ],
    exchange: [
      {
        key: "4",
        type: "法币间兑换",
        buycurrency: "USD",
        shellcurrency: "EUR",
        fee: "0.5",
        switchOn: true,
      },
      {
        key: "5",
        type: "法币间兑换",
        buycurrency: "CNH",
        shellcurrency: "EUR",
        fee: "0.4",
        switchOn: false,
      },
      {
        key: "6",
        type: "法币间兑换",
        buycurrency: "EUR",
        shellcurrency: "USD",
        fee: "0.3",
        switchOn: true,
      },
      {
        key: "7",
        type: "法币间兑换",
        buycurrency: "CNH",
        shellcurrency: "USD",
        fee: "0.25",
        switchOn: false,
      },
      {
        key: "8",
        type: "法币间兑换",
        buycurrency: "USD",
        shellcurrency: "CNH",
        fee: "0.2",
        switchOn: true,
      },
      {
        key: "9",
        type: "法币间兑换",
        buycurrency: "EUR",
        shellcurrency: "CNH",
        fee: "0.15",
        switchOn: false,
      },
      {
        key: "10",
        type: "法币与U币兑换",
        buycurrency: "USDT",
        shellcurrency: "USD",
        fee: "0.1",
        switchOn: true,
      },
      {
        key: "11",
        type: "法币与U币兑换",
        buycurrency: "USDT",
        shellcurrency: "EUR",
        fee: "0.1",
        switchOn: false,
      },
      {
        key: "12",
        type: "法币与U币兑换",
        buycurrency: "USDC",
        shellcurrency: "USD",
        fee: "0.2",
        switchOn: true,
      },
      {
        key: "13",
        type: "法币与U币兑换",
        buycurrency: "USDC",
        shellcurrency: "EUR",
        fee: "0.18",
        switchOn: false,
      },
      {
        key: "14",
        type: "U币与法币兑换",
        buycurrency: "USD",
        shellcurrency: "USDT",
        fee: "0.1",
        switchOn: true,
      },
      {
        key: "15",
        type: "U币与法币兑换",
        buycurrency: "EUR",
        shellcurrency: "USDT",
        fee: "0.12",
        switchOn: false,
      },
      {
        key: "16",
        type: "U币与法币兑换",
        buycurrency: "USD",
        shellcurrency: "USDC",
        fee: "0.08",
        switchOn: true,
      },
      {
        key: "17",
        type: "U币与法币兑换",
        buycurrency: "EUR",
        shellcurrency: "USDC",
        fee: "0.09",
        switchOn: false,
      },
    ],
    transfer: [
      {
        key: "4",
        type: "法币转出",
        currency: "EUR",
        fee: "0.15",
        min: "100",
        switchOn: true,
      },
      {
        key: "5",
        type: "法币转出",
        currency: "USD",
        fee: "0.1",
        min: "200",
        switchOn: false,
      },
      {
        key: "10",
        type: "U币转出",
        currency: "USDC",
        fee: "0.05",
        min: "50",
        switchOn: true,
      },
      {
        key: "11",
        type: "U币转出",
        currency: "USDT",
        fee: "0.07",
        min: "30",
        switchOn: false,
      },
    ],
    settlement: [
      { key: "4", type: "结汇", currency: "CNH", fee: "0.2", switchOn: true },
    ],
  };

  useEffect(() => {
    if (formData.length > 0) {
      setData(formData);
    } else {
      setData(simulatedFormData);
    }
  }, [formData]);
  const [data, setData] = useState(initialData);

  const handleInputChange = (key: any, field: any, value: any, tab: any) => {
    const updatedData = { ...data };
    updatedData[tab] = updatedData[tab].map((item) =>
      item.key === key ? { ...item, [field]: value } : item
    );
    setData(updatedData);
    onSubmit(updatedData); // 每次数据变化后通过回调传递数据
  };

  const handleSwitchChange = (key: any, checked: any, tab: any) => {
    handleInputChange(key, "switchOn", checked, tab);
  };

  const rechargeColumns = [
    { title: "类型", dataIndex: "type", key: "type" },
    {
      title: "返点/分润",
      key: "switch",
      render: (_: any, record: any) => (
        <Switch
          checked={record.switchOn}
          onChange={(checked) =>
            handleSwitchChange(record.key, checked, "recharge")
          }
        />
      ),
    },
    { title: "币种", dataIndex: "currency", key: "currency" },
    {
      title: "费率",
      key: "fee",
      render: (_: any, record: any) => (
        <Input
          placeholder="请输入费率"
          value={record.fee}
          onChange={(e) =>
            handleInputChange(record.key, "fee", e.target.value, "recharge")
          }
        />
      ),
    },
  ];

  const exchangeColumns = [
    { title: "类型", dataIndex: "type", key: "type" },
    {
      title: "返点/分润",
      key: "switch",
      render: (_, record) => (
        <Switch
          checked={record.switchOn}
          onChange={(checked) =>
            handleSwitchChange(record.key, checked, "exchange")
          }
        />
      ),
    },
    { title: "卖出币种", dataIndex: "shellcurrency", key: "shellcurrency" },
    { title: "买入币种", dataIndex: "buycurrency", key: "buycurrency" },
    {
      title: "费率",
      key: "fee",
      render: (_, record) => (
        <Input
          placeholder="请输入"
          value={record.fee}
          onChange={(e) =>
            handleInputChange(record.key, "fee", e.target.value, "exchange")
          }
        />
      ),
    },
  ];

  const transferColumns = [
    { title: "类型", dataIndex: "type", key: "type" },
    {
      title: "返点/分润",
      key: "switch",
      render: (_, record) => (
        <Switch
          checked={record.switchOn}
          onChange={(checked) =>
            handleSwitchChange(record.key, checked, "transfer")
          }
        />
      ),
    },
    { title: "币种", dataIndex: "currency", key: "currency" },
    {
      title: "费率",
      key: "fee",
      render: (_, record) => (
        <Input
          placeholder="请输入费率"
          value={record.fee} // 正确绑定
          onChange={
            (e) =>
              handleInputChange(record.key, "fee", e.target.value, "transfer") // 正确更新 `fee`
          }
        />
      ),
    },
    {
      title: "最低",
      key: "min",
      render: (_, record) => (
        <Input
          placeholder="请输入费率"
          value={record.min} // 错误的绑定，应该是 `record.min`
          addonAfter="%"
          onChange={
            (e) =>
              handleInputChange(record.key, "min", e.target.value, "transfer") // 错误的字段，应该是 "min"
          }
        />
      ),
    },
  ];

  const settlementColumns = [
    { title: "类型", dataIndex: "type", key: "type" },
    {
      title: "返点",
      key: "switch",
      render: (_, record) => (
        <Switch
          checked={record.switchOn}
          onChange={(checked) =>
            handleSwitchChange(record.key, checked, "settlement")
          }
        />
      ),
    },
    { title: "币种", dataIndex: "currency", key: "currency" },
    {
      title: "费率",
      key: "fee",
      render: (_, record) => (
        <Input
          placeholder="请输入"
          value={record.fee}
          onChange={(e) =>
            handleInputChange(record.key, "fee", e.target.value, "settlement")
          }
        />
      ),
    },
  ];

  return (
    <div>
      <div style={{ fontSize: "16px", fontWeight: "bold", marginTop: "20px" }}>
        客户交易费率
      </div>
      <Tabs
        defaultActiveKey="1"
        items={[
          {
            label: "充值",
            key: "1",
            children: (
              <Table
                columns={rechargeColumns}
                dataSource={data.recharge}
                pagination={false}
                style={{ width: "500px" }}
                bordered
                size="small"
              />
            ),
          },
          {
            label: "兑换",
            key: "2",
            children: (
              <Table
                columns={exchangeColumns}
                dataSource={data.exchange}
                pagination={false}
                style={{ width: "500px" }}
                bordered
                size="small"
              />
            ),
          },
          {
            label: "转账",
            key: "3",
            children: (
              <Table
                columns={transferColumns}
                dataSource={data.transfer}
                pagination={false}
                style={{ width: "500px" }}
                bordered
                size="small"
              />
            ),
          },
          {
            label: "结算",
            key: "4",
            children: (
              <Table
                columns={settlementColumns}
                dataSource={data.settlement}
                pagination={false}
                style={{ width: "500px" }}
                bordered
                size="small"
              />
            ),
          },
        ]}
      />
    </div>
  );
}
